Khái niệm cơ bản Vue.js

Đối tượng Vue

Một ứng dụng Vue luôn được bắt đầu bằng cách khởi tạo một đối tượng Vue (Vue instance):

new Vue({    // Các property})

Một ứng dụng Vue bao gồm một đối tượng Vue gốc. Ứng dụng này cũng thường được sắp xếp thành một cây gồm các component lồng nhau và tái sử dụng được. Ví dụ, cây component của một ứng dụng todo có thể trông như thế này:

Root Instance|- TodoList   |- TodoItem      |- DeleteTodoButton      |- EditTodoButton   |- TodoListFooter      |- ClearTodosButton      |- TodoListStatistics

Dữ liệu và phương thức

Khi một đối tượng Vue được khởi tạo, tất cả các thuộc tính trong object data sẽ được thêm vào hệ thống phản ứng (reactivity system) của Vue. Điều này có nghĩa là view sẽ phản ứng khi giá trị của các thuộc tính này thay đổi, và tự cập nhật tương ứng với các giá trị mới.

// Chúng ta khởi tạo một object datavar data = { a: 1 }// Khởi tạo một đối tượng Vue và truyền object data vào property data của đối// tượng Vuevar vm = new Vue({  data: data})// vm.a và data.a cùng trỏ đến một đối tượng!vm.a === data.a // => true// Thay đổi thuộc tính của vm cũng sẽ ảnh hưởng đến dữ liệu ban đầuvm.a = 2data.a // => 2// ... và ngược lạidata.a = 3vm.a // => 3

Vòng đời của đối tượng

Khi được khởi tạo, một đối tượng Vue sẽ đi qua nhiều bước khác nhau - cài đặt quan sát dữ liệu (data observation), biên dịch template, gắn kết vào DOM, cập nhật DOM khi dữ liệu thay đổi v.v. Trong suốt tiến trình này, nó cũng sẽ thực thi một số hàm gọi là lifecycle hook, giúp người dùng thêm code của mình vào các giai đoạn (stage) cụ thể trong vòng đời của đối tượng.

Ví dụ, hook created có thể được dùng để thực thi code sau khi một đối tượng được khởi tạo:

new Vue({  data: {    a: 1  },  created: function () {    // `this` trỏ đến đối tượng Vue hiện hành    console.log('giá trị của a là ' + this.a)  }})// => "giá trị của a là 1"

Các hook khác như mounted, updated, và destroyed cũng được gọi vào các giai đoạn khác nhau trong vòng đời của đối tượng. Tất cả các hook này đều được thực thi với ngữ cảnh this trỏ đến đối tượng Vue hiện hành.